<template>
  <div class="content-height scroll-bar">
    <div class="search-class">
      <Row>
        <Col span="8">
          <Input
            v-model="searchParams.shortName"
            style="width:250px;"
            placeholder="请输入名称"
          />
        </Col>
        <Col span="8">
          <Select
            v-model="searchParams.dictEngineeringType"
            style="width:250px;"
            ref="treeSelect"
            placeholder="请选择工程类型"
          >
            <Option
              v-for="item in list"
              :value="item.code"
              :key="item.code"
              style="display: none;"
              >{{ item.title }}</Option
            >
            <Tree
              :data="engineeringTypeList"
              style="padding-left:20px"
              @on-select-change="checkEng"
            ></Tree>
          </Select>
        </Col>
        <Col span="8" v-show="status">
          <Select
            v-model="searchParams.wbsId"
            style="width:250px;"
            @on-open-change="getWbsList"
            not-found-text="暂无专业类型"
            ref="treeSelectWbs"
            placeholder="请选择专业类型"
          >
            <Option
              v-for="item in list1"
              :value="item.id"
              :key="item.id"
              style="display: none;"
              >{{ item.title }}</Option
            >
            <Tree
              :data="wbsList"
              ref="Tree"
              :load-data="loadData"
              style="padding-left:20px"
              v-if="wbsList.length > 0"
              @on-select-change="checkWbs"
            ></Tree>
          </Select>
        </Col>

      </Row>
      <Row>
        <Col span="8" style="padding-top:20px;">
          <Select
            v-model="searchParams.manageEntId"
            style="width:250px;"
            ref="treeSelectEnt"
            placeholder="请选择管理单位"
          >
          <Option
            v-for="item in list2"
            :value="item.id"
            :key="item.id"
            style="display: none;"

          >{{ item.title }}</Option
          >
          <Tree
            :data="entTree"
            style="padding-left:20px"
            @on-select-change="checkEnt"
          ></Tree>
          </Select>
        </Col>
        <Col span="8" style="padding-top:20px;">
          <Select v-model="searchParams.dictRiskGrade"   placeholder="请选择风险等级" style="width:250px;">
            <Option
              v-for="item in riskGradeList"
              :value="item.code"
              :key="item.code"
              >{{ item.name }}</Option
            >
          </Select>
        </Col>
        <Col span="8" style="padding-top:20px;">
          <Select
            v-model="searchParams.dictConstructionState"
            style="width:250px;"
            placeholder="请选择施工状态"
          >
            <Option
              v-for="item in constructionStateList"
              :value="item.code"
              :key="item.code"
              >{{ item.name }}</Option
            >
          </Select>
        </Col>
      </Row>
      <Row>
        <Col span="20" style="height:57px;">
        </Col>
        <Col span="4" style="text-align: right;padding-top:20px;">
        <Button
          type="primary"
          style="margin-right: 15px"
          @click="getProjectList"
          v-if="control.search"
        >搜索</Button
        >
        </Col>
      </Row>
    </div>
    <Table
      border
      :columns="columns"
      :data="projectList"
      class="scroll-bar"
    >
      <template slot-scope="{ row, index }" slot="action">
        <span
          title="详情"
          class="button-class"
          v-if="control.detail"
          @click="addBtn('details', row.id, '详情')"
          type="text"
          >详情</span
        >
      </template>
    </Table>
    <Row type="flex" justify="center">
      <Col>
      <Page
        class="pagination"
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="[10,20,50,100]"
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
        show-elevator
        show-total
        show-sizer
      />
      </Col>
    </Row>
  </div>
</template>
<script>
import tree from 'vue-giant-tree'
export default {
  name: 'search-project',
  components: {
    tree
  },
  data() {
    return {
      searchParams: {
        name:'',
        dictEngineeringType:'',
        wbsId:'',
        manageEntId:'',
        dictRiskGrade:'',
        dictConstructionState:'',
      }, //搜索条件
      buttonList:localStorage.getItem('buttonList'),
      button:[],
      engineeringTypeList: [], //工程类型
      riskGradeList: [], //风险等级
      constructionStateList: [], //施工状态
      projectList: [], //项目列表
      list: [], //工程类型SELECT选择
      list1: [], //专业类型SELECT选择
      list2: [], //管理单位SELECT选择
      wbsList: [], //专业类型
      entTree:[],
      showTree: false,
      control:{},
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 70,
          render: (h, params) => {
            return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
          }
        },
        {
          title: '项目名称',
          key: 'shortName',
          width: '350'
        },
        {
          title: '工程类型',
          key: 'dictEngineeringTypeName',
          width: '150'
        },
        {
          title: '专业类型',
          align: 'center',
          key: 'wbsName'
        },
        {
          title: '风险等级',
          align: 'center',
          key: 'dictRiskGradeName'
        },
        {
          title: '施工状态',
          align: 'center',
          key: 'dictConstructionStateName'
        },
        {
          title: '项目经理',
          align: 'center',
          key: 'pmName'
        },
        {
          title: '联系电话',
          align: 'center',
          key: 'tel'
        },
        {
          title: '管理单位',
          align: 'center',
          key: 'manageEntName'
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action'
        }
      ],
      listParam: {
        name: ''
      },
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      },
      status:true,
    }
  },
  methods: {
    //跳转详情
    addBtn(type, id, name) {
      this.$router.push(`search-project/${type}/${id}/${name}`)
    },
    //按钮权限
    buttonShow() {
      let buttonList = JSON.parse(localStorage.getItem('buttonList'))
      buttonList.map(val => {
        let key = Object.keys(val).toString()
        if (key === this.$route.name) {
          console.log(val);
          Object.values(val)[0].map(item => {
            if (item.code == 'P_0401_01') {
              this.control.search = true
            } else if (item.code == 'P_0401_02') {
              this.control.detail = true
            }
          })
        }
      })
    },
    //获取纯机构树
    getEntTree() {
      this.$api.projectInquiry.getEntTree().then(res => {
        if (res.code == 200) {
          this.entTree = res.data
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    //获取工程类型
    getEngineeringType() {
      let code = 'ENGINEERING_TYPE'
      this.$api.projectInquiry.getTreeByTypeCode(code).then(res => {
        if (res.code == 200) {
          this.engineeringTypeList = res.data
          this.engineeringTypeList.forEach(item => {
            item.title = item.name
            if (item.children.length > 0) {
              item.children = this.getCheildItem(item.children)
            }
          })
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },

    //递归树状结构
    getCheildItem(data) {
      if(data){
        let item = data
        const arr = []
        item.forEach(val => {
          let obj = {}
          obj.title = val.name
          obj.code = val.code
          obj.children = []
          if (val.children.length > 0) {
            obj.children = this.getCheildItem(val)
          }
          arr.push(obj)
        })
        return arr
      }

    },
    checkEng(data) {
      if(data.length>0){
        if (data[0].children.length > 0) {
          this.$Message.warning('请选择最子级节点')
        } else {
          this.list = []
          this.list1 = []
          this.wbsList = []
          this.searchParams.wbsId = ''
          let code = data[0].code
          let title = data[0].title
          this.list.push({
            code,
            title
          })
          this.searchParams.dictEngineeringType = code
          this.getWbsList(this.searchParams.dictEngineeringType)
          this.$refs.treeSelect.visible = false
        }
      }
    },
    checkEnt(data) {
      this.list2 = []
      let id = data[0].objectId
      let title = data[0].title
      this.list2.push({
        id,
        title
      })
      if(id){
        this.searchParams.manageEntId = id
        this.$refs.treeSelectEnt.visible = false
      }

    },
    //获取风险等级
    getRiskGrade() {
      let code = 'RISK_GRADE'
      this.$api.projectInquiry.getListByTypeCode(code).then(res => {
        if (res.code == 200) {
          this.riskGradeList = res.data
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    //获取施工状态
    getConstructionState() {
      let code = 'CONSTRUCTION_STATE'
      this.$api.projectInquiry.getListByTypeCode(code).then(res => {
        if (res.code == 200) {
          this.constructionStateList = res.data
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    //获取专业类型
    getWbsList(data) {
      if (data) {
        if (this.searchParams.dictEngineeringType) {
          let res = {
            currentPage: 1,
            pageSize: 99999,
            whereMap: {
              dictEngineeringType: this.searchParams.dictEngineeringType,
              parentId: 0
            }
          }
          this.$api.projectInquiry.getWbsList(res).then(res => {
            if (res.code == 200) {
              res.data.resultObject.map(r => {
                this.$set(r, 'title', r.name)
                if (r.hasChildren) {
                  this.$set(r, 'children', [])
                  this.$set(r, 'loading', false)
                }
              })
              this.wbsList = [
                {
                  title: '标准WBS',
                  parentId: 0,
                  hasChildren: false,
                  loading: false,
                  expand: true,
                  children: res.data.resultObject
                }
              ]
            } else {
              this.$Message.error(res.data.msg)
            }
          })
        } else {
          this.$Message.warning('请先选择工程类型')
        }
      }
    },
    loadData(item, callback) {
      let params = {
        currentPage: 1,
        pageSize: 99999,
        whereMap: {
          dictEngineeringType: this.searchParams.dictEngineeringType,
          parentId: item.id
        }
      }
      let data = []
      this.$api.projectInquiry.getWbsList(params).then(res => {
        if (res.code == 200) {
          callback(this.getTree(res.data.resultObject))
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    getTree(tree) {
      return tree.map(node => {
        node.title = node.name
        if (node.hasChildren) {
          node.loading = false
          node.children = []
        }
        return node
      })
    },
    checkWbs(data) {
      this.list1 = []
      let id = data[0].id
      let title = data[0].title
      this.list1.push({
        id,
        title
      })
      this.searchParams.wbsId = id
      this.$refs.treeSelectWbs.visible = false
    },
    //获取项目列表
    getProjectList() {
      let data = {
        pageSize: this.page.pageSize,
        currentPage: this.page.current,
        whereMap: this.searchParams
      }
      data.whereMap.isQuery = true
      this.$api.projectInquiry.getProjectList(data).then(res => {
        if (res.code == 200) {
          this.projectList = res.data.resultObject
          this.page.totalPage = res.data.totalPages;
          this.page.total = res.data.totalRecord
          this.projectList.forEach(item => {
            item.pmName = item.projectManage.pmName
            item.tel = item.projectManage.tel
            item.manageEntName = item.projectManage.manageEntName
          })
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    getWbsStatus(){
      this.$api.projectInquiry.existWBS().then(res => {
        if (res.code == 200) {
          this.status = res.data;
          if(!this.status){
            this.columns.map((item, index) => {
              if(item.title=='专业类型'){
                  this.columns.splice(index, 1)
              }
            })
          }
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    pageChange(current) {
      this.page.current = current
      this.getProjectList()
    },
    sizeChange(size) {
      this.page.pageSize = size
      this.getProjectList()
    },
    //搜索
    searchAction() {
      this.page.current = 1
      this.page.size = 10
    },
    //重置
    resetParam() {
      this.searchParams = {
        name:'',
        dictEngineeringType:'',
        wbsId:'',
        manageEntId:'',
        dictRiskGrade:'',
        dictConstructionState:'',
      },
      this.page.current = 1
      this.page.size = 10
      this.getEngineeringType()
      this.getRiskGrade()
      this.getEntTree()
      this.getConstructionState()
      this.getProjectList()
    },
    //导出
    explodAction() {}
  },
  mounted() {
    this.buttonShow();
    this.getEngineeringType()
    this.getRiskGrade()
    this.getConstructionState()
    this.getProjectList()
    this.getEntTree()
    this.getWbsStatus()
  }
}
</script>
<style>
.tree {
  width: 250px;
  margin-left: 50px;
  overflow: auto;
  height: 200px;
}
.search-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: block;
}
</style>
